<template>
	<view class="uni_box">
		<!-- <navbar :isback='false' backgroundColor='#fff'>
			<view slot="left" class="hleft">
				<image class="gllogo" src="/static/LOGO.png" />
			</view>
		</navbar> -->
		<!-- #ifdef APP-PLUS -->
		<!-- <view class="immerse"></view> -->
		<!-- #endif -->
		<view class="newcontent" :class="bgcolor=='#fff'?'':'heise'" :style="{
			background:bgcolor
		}">
			<view class="head">
				<view class="headview">
					<image class="headlogo" src="/static/headlogo.png" v-if="bgcolor=='#fff'" />
					<image class="headlogo" src="/static/headlogotwo.png" v-if="bgcolor=='#0d0e0f'" />
					<view class="lianjie" v-if="cont == ''" @click="connectWallet()"  >链接钱包</view>
					<view class="xuanview" v-if="cont!=''">
						<image class="huang"  :src="zhaninfo.img" />
						<text class="tcont">{{cont}}</text>
						<u-icon name="arrow-down" color="#333" size="28"></u-icon>
					</view>
					<u-switch v-model="checked" active-color="#03c288" size="32" @change="swchange" inactive-color="#e7e7e7"></u-switch>
				</view>
			</view>
			<view class="headtwo">
				<view class="search">
					<view class="chain-wrap" @click="iszhan=true">
						<image class="huang" :src="zhaninfo.img" />
						<u-icon name="arrow-down" color="#333" size="28"></u-icon>
					</view>
					<view class="split"></view>
					<view class="address-wrap">
						<u-input style="width:100%;margin-left: 20rpx;" v-model="keywords" type="text" :border="border" placeholder='请输入您的地址' />
					</view>
				</view>
				<view class="confirm" @click="scan()" >确认</view>


				<view class="chain-list hidden-scrollbar" v-if="iszhan">
					<view class="chain-item" :class="typeindex==index?'selected':''" v-for="(item,index) in list" :key="index" @click="typeClick1(item,index)">
						<image class="leftimg" :src="item.img" />
						<text class="name">{{ item.value }}</text>
						<image class="gous" src="/static/gous.png" />
					</view>
				</view>
			</view>
			<view class="headthree">
				<image class="gantan" src="/static/gantan.png" />
				<view class="tishi">温馨提示：一般不限量的授权都伴随着巨大风险，建议您可以取消授权，也可以在进行授权的时候修改授权数量。</view>
			</view>
			<view class="data-wrap">
				<view class="test-type-wrap">检测结果</view>
				<view class="type-wrap">
					<view class="type " :class="type==1?'select':''" @click="typeClick('1')">全部</view>
					<view class="type" :class="type==2?'select':''" @click="typeClick('2')">ERC-20</view>
					<view class="type" :class="type==3?'select':''" @click="typeClick('3')">ERC-721</view>
					<view class="type" :class="type==4?'select':''" @click="typeClick('4')">ERC-1155</view>
				</view>

				<view class="data" v-for="(item,index) in 10" :key="index">
					<view class="data-top">
						<image class="tou2" src="/static/tou2.png" />
						<text class="symbol">USDT</text>
						<image class="xiazai" src="/static/xiazai.png" v-if="bgcolor=='#fff'"  />
						<image class="xiazai" src="/static/xiazaitwo.png" v-if="bgcolor=='#0d0e0f'"  />
						<view class="risk di low">
							<image class="luse" src="/static/luse.png" />
							<text class="difeng">低风险</text>
						</view>
						<!-- <view class="risk zhong low">
							<image class="luse" src="/static/zhong.png" />
							<text class="difeng">中风险</text>
						</view> -->
						<!-- <view class="risk gao low">
							<image class="luse" src="/static/gao.png" />
							<text class="difeng">高风险</text>
						</view> -->
					</view>
					<view class="data-info">
						<view class="data-info-item">
							<text class="name">合约地址:</text>
							<text class="nei"> PancakeRouter </text>
							<image class="dui" src="/static/dui.png" />
						</view>
						<view class="data-info-item">
							<text class="name">授权数量:</text>
							<text class="nei"> Unlimited </text>
						</view>
						<view class="data-info-item">
							<text class="name">首次授权时间:</text>
							<text class="nei"> 2023-02-09 12:44:39 </text>
						</view>
						<view class="data-info-item">
							<text class="name">授权哈希:</text>
							<text class="nei"> 0x3528c7...20c634e6 </text>
							<image class="dui" src="/static/xiazai.png" v-if="bgcolor=='#fff'"  />
							<image class="dui" src="/static/xiazaitwo.png" v-if="bgcolor=='#0d0e0f'"  />
						</view>
					</view>
					<view class="cancel">
						<text> 切换到BSC网络后，可取消授权 </text>
					</view>
				</view>
				
			</view>
		</view>
		<u-select v-model="show" :list="list" @confirm="confirm" ></u-select>
</view>
</template>

<script>
	import {connectMetamask} from "@/utils/dapp.js"
	import {path, take, takeLast} from "ramda"
import tryCatch from "ramda/src/tryCatch"
export default {
	data() {
		return {
			bgcolor:'#fff',
			checked:false,
			border:false,
			type:'1',
			show:false,
			keywords:'',
			list: [
				{
					value: 'Ethereum',
					label: 'Ethereum',
					img:'/static/huangtwo.jpg',
					chainid: '0x1',
				},
				{
					value: 'BSC',
					label: 'BSC',
					img:'/static/huang.jpg',
					chainid: '0x38',
				},
				{
					value: 'Tron',
					label: 'Tron',
					img:'/static/Tro.png'
				},
				{
					value: 'Arbitrum',
					label: 'Arbitrum',
					img:'/static/Arb.png',
					chainid: '0xa4b1',
				},
				{
					value: 'Polygon',
					label: 'Polygon',
					img:'/static/pol.png',
					chainid: '0x89',
				},
				{
					value: 'OKTC',
					label: 'OKTC',
					img:'/static/huang.jpg',
					chainid: '0x42',
				},
				{
					value: 'Fantom',
					label: 'Fantom',
					img:'/static/oktc.png',
					chainid: '0xfa',
				},
				{
					value: 'Avalanche',
					label: 'Avalanche',
					img:'/static/al.png',
					chainid: '0xa86a',
				},
			],
			hbg:'#0d0e0f',
			cont:'',
			typeindex:0,
			iszhan:false,
			zhaninfo:{}
		}
	},
	components: {
	},
	computed: {
	},

	mounted() {
		
	},
	async onLoad() {
		const addr = await connectMetamask()
		if(typeof addr === 'string'){
			this.cont = take(5, addr) + '...' +  takeLast(3, addr) + ' '
		}
		this.zhaninfo = this.list[1]
		this.typeindex = 1
		// console.log(this.zhaninfo)
	},
	async onShow() {
		
	},
	onReachBottom: function () {
	},
	methods: {
		typeClick(e){
			this.type = e
		},
		async connectWallet(){
			const addr = await connectMetamask()
			if(typeof addr === 'string'){
			this.cont = take(5, addr) + '...' +  takeLast(3, addr) + ' '
			}
		},
		async scan(){
			const addr = await connectMetamask() 
			if(typeof addr !== 'string') return console.log('no addr')
			const uri = `http://127.0.0.1/token_security_approval?chain_id=56&addr=${addr}&ns=ethereum`
			const res = await fetch(uri)
			const data = await res.json()
			const _list = path(['data', 'token_approval_data'], data)
			console.log(_list)
			
			
		},
		async getLogintwo(code){
			let res = await this.$u.api.miniapplogin({
				code:code
				// userid:uni.getStorageSync('userid')
			});
			console.log(res.userinfo)
			this.seeion_key = res.seeion_key
			uni.setStorageSync('token',res.userinfo.token)
			// uni.setStorageSync('userid',res.Data.userinfo.userid)
			if(res.userinfo.mobile == ''||!res.userinfo.mobile){
				//弹出登录
				this.loginshow = true
			}else{
				this.getInit()
			}
			// // console.log(res)
			// console.log(res.Data)
		},
		
		async getLun(){
			let res = await this.$u.api.banner({
			});
			console.log(res) 
		},
		async getList(){//列表数据
			let res = await this.$u.api.project({
			  pagesize:this.limit,
			  page:this.page,
			  keywords:this.keywords
			});
			console.log(res)
			this.last_page = res.lastpage;
			let list = res.list;
			this.list = this.page == 1 ? list : [...this.list, ...list];	
			// console.log(this.list)
			if(this.page >= this.last_page){
			  this.status = 'nomore';
			}
			
		},
		loadmore() {
			let page = this.page;
			// let last_page = this.last_page;
			if (this.status == 'loadmore') {
				this.page++;
				this.getList();
			}
		},
		confirm(e){
			console.log(e)
		},
		swchange(e){
			console.log(e)
			if(!e){
				this.bgcolor = '#fff'
			}else{
				this.bgcolor = '#0d0e0f'
			}
			console.log(bgcolor)
		},
		async typeClick1(item,index){
			this.typeindex = index
			this.zhaninfo = item
			this.iszhan=false
			
			try{
				const chain_id = await window.ethereum.request({ method: "eth_chainId" })
				if(chain_id != item.chainid){
					await window.ethereum.request({
					  method: 'wallet_switchEthereumChain',
					  params: [{ chainId: item.chainid }]
					});
				}
			}catch(e){
				//TODO handle the exception
			}
			
			
		}
		
		

	}
}
</script>

<style lang="scss" scoped>
page,
html {
}
.newcontent{
	min-height: 100vh;
	padding-bottom: 30rpx;
	// background-color: #fff;

	.head{
		
		background-color: #f7f7f7;
		.headview{
			margin: 0 16px;
			padding: 15px 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.headlogo{
				width: 101px;
				height: 18px;
			}
			.xuanview{
				padding: 3px 10px;
				border: 1rpx solid #ddd;
				border-radius: 25px;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-right: 8px;
				margin-left: auto;
				.huang{
					width: 24px;
					height: 24px;
					margin-right: 5px;
				}
				.tcont{
					max-width: 150rpx;
					display: inline-block;
					white-space: nowrap;
					margin-right: 10rpx;
				}
			}
			.lianjie{
				margin-left: auto;
				padding: 0 15px;
				background: #2980fe;
				color: #fff;
				border-radius: 17px;
				height: 24px;
				line-height: 24px;
				font-size: 12px;
				cursor: pointer;
				margin-right: 10px;
			}
		}
	}
	.headtwo{
		padding: 8px 16px 16px;
		display: flex;
		background: #f6f6f6;
		margin: 0;
		position: relative;
		flex-direction: row;
		align-items: center;
		// padding: 8px 16px 16px;
		// display: flex;
		// background: var(--bg-6);
		// margin: 0;
		// position: relative;
		.search{
			display: flex;
			align-items: center;
			border: 1px solid #eee;
			border-radius: 12px;
			height: 44px;
			width: 100%;
			background-color: #fff;
			.chain-wrap{
				background: transparent;
				height: 100%;
				position: static;
				width: 60px;
				display: flex;
				align-items: center;
				justify-content: center;
				// border-right: 1rpx solid #eee;
				.chain{
					border: none;
					background: transparent;
					height: 100%;
					padding: 0 6px;
					display: flex;
					flex-direction: row;
					align-items: center;

				}
				.huang{
					width: 24px;
					height: 24px;
					margin-right: 5px;
				}
			}
			.split{
				height: 24px;
    			width: 1px;
				background-color: #eee;
			}
			.address-wrap{
				width: 72%;
			}
		}
		.confirm{
			position: static;
			height: 44px;
			padding: 0 21px;
			margin-left: 10px;
			margin-top: 0;
			white-space: nowrap;
			font-size: 12px;
			background: #2980fe;
			border-radius: 12px;
			margin-top: auto;
			// height: 49px;
			// position: absolute;
			bottom: 60px;
			left: 16px;
			right: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 13px;
			color: #fff;
			cursor: pointer;
		}


		.chain-list{
			width: auto;
			right: 16px;
			left: 16px;
			top: 60px;
			position: absolute;
			top: 54px;
			max-height: 307px;
			overflow-y: auto;
			// width: 100%;
			border: 1px solid #eee;
			background: #fff;

			z-index: 9;
			// background: var(--bg);
			padding: 0 5px;
			border-radius: 12px;
			box-shadow: 0 4px 10px 0 rgba(0,0,0,.12);
			.chain-item{
				margin: 7px 0;
				padding: 5px 16px 5px 10px;
				display: flex;
				align-items: center;
				border-radius: 12px;
				.leftimg{
					height: 36px;
					width: 36px;
				}
				.name{
					margin-left: 9px;
    				font-size: 13px;
					color: #333;
				}
				.gous{
					margin-left: auto;
    				height: 16px;
					width: 16px;
					display: none;
				}
			}
			.selected{
				.gous{
					display: inline-block;
				}
			}
		}
	}

	.headthree{
		background: #ffe9e6;
		padding: 12px 30px;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		.gantan{
			width: 16px;
			height: 16px;
			// margin-right: 20rpx;
		}
		.tishi{
			margin-left: 12px;
			font-family: PingFang SC,PingFang SC-Regular;
			color: #e55036;
			font-size: 12px;
			width: 90%;
		}
	}
	.data-wrap{
		margin: 13px 15px;
		.test-type-wrap{
			font-weight: 700;
			text-align: left;
			font-size: 16px;
			color: #101010;
		}
		.type-wrap{
			overflow: hidden;
			.type{
				float: left;
				margin-right: 10px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 12px;
				height: 26px;
				width: 74px;
				margin-top: 15px;
				border-radius: 8px;
				background: #f9f9f9;
				border: 1px solid #f9f9f9;
				color: #666;
			}
			.select{
				background: #fff;
				border: 1px solid #333;
				color: #333;
			}
		}
		.data{
			margin-top: 10px;
			border: 1px solid #eee;
			background: #fff;
			box-sizing: border-box;
			border-radius: 15px;
			box-shadow: 0 4px 10px 0 rgba(0,0,0,.12);
			position: relative;
			.data-top{
				border-bottom: 1px solid #eee;
				padding: 12px 0 11px 16px;
				padding-right: 0;
				display: flex;
				align-items: center;
				position: relative;
				// justify-content: space-between;
				.tou2{
					height: 28px;
					width: 28px;
					min-width: 28px;
					border-radius: 50%;
				}
				.symbol{
					margin-left: 10px;
					font-size: 13px;
					font-weight: 700;
					white-space: nowrap;
				}
				.xiazai{
					height: 10px;
    				margin-left: 6px;
					width: 10px;
				}

				.risk{
					
					display: flex;
					align-items: center;
					height: 29px;
					padding: 0 10px 0 7.5px;
					// border: 1px solid #eee;
					border-radius: 50px 0 0 50px;
					white-space: nowrap;
					position: absolute;
					right: 0;
					.luse{
						width: 14px;
						height: 14px;
					}
					.difeng{
						font-size: 12px;
    					margin-left: 6px;
					}
				}
				.di{
					background: #d9fdf2;
   					color: #03c288;
				}
				.zhong{
					background: #ffead4;
    				color: #ff931f;
				}
				.gao{
					background: #ffe9e6;
    				color: #e55036;
				}
			}

			.data-info{
				padding: 0 16px;
				.data-info-item{
					margin: 10px 0;
					font-size: 12px;
					line-height: 16.5px;
					display: flex;
					align-items: center;
					.name{
						color: #666;
					}
					.nei{
						color: #101010;

					}
					.dui{
						width: 11px;
    					margin-left: 6.5px;
						height: 11px;
					}
				}
			}
		}

		.cancel{
			background: #e8f1ff;
    		border: 1px solid #e8f1ff;
			margin: 15px 16px 0;
			height: 39px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			margin-bottom: 15px;
			font-size: 12px;
			// border: 1px solid #2980fe;
			border-radius: 19px;
			cursor: pointer;
			text{
				color: #2980fe;
				font-weight: 500;
			}
		}
	}
}
.heise{
	.head{
		background: #0d0e0f;
		.headview{
			.xuanview{
				.tcont{
					color: #fff;
				}
			}
		}
	}
	.headtwo{
		background: #0d0e0f;
		.search{
			background: #0d0e0f;
			border: 1px solid #2980fe;
		}
		/deep/.uni-input-input {
			color: #fff;
		}
		.chain-list{
			background: #18191c;
			border: 1px solid #18191c;
			.chain-item{
				.name{
					color: #fff;
				}
			}
		}
	}
	.headthree{
		background: #2d1e1f;
	}
	.data-wrap{
		.test-type-wrap{
			color: #fff;
		}
		.type-wrap{
			.type{
				background: #131315;
				border: 1px solid #131315;
				color: #71747a;
			}
			.select{
				background: #0d0e0f;
				border: 1px solid #d7dae0;
				color: #d7dae0;
			}
		}
		.data{
			border: 1px solid #2d2f33;
			background: #18191c;
			box-sizing: border-box;
			border-radius: 15px;
			box-shadow: 0 4px 10px 0 rgba(0,0,0,.12);
			position: relative;
			.data-top{
				border-bottom: 1px solid #2d2f33;
				.symbol{
					color: #fff;
				}
				// .risk{
				// 	background: #373D4D;
    			// 	color: #03c288;
				// 	border: 1px solid transparent;
				// }
				.di{
					background: #373D4D;
    				color: #03c288;
				}
				.zhong{
					background: #3c2d1c;
    				color: #ff931f;
				}
				.gao{
					background: #2d1e1f;
    				color: #e55036;
				}
			}
			.data-info{
				.data-info-item{
					.name{
						color: #666;
					}
					.nei{
						color: #d7dae0;
					}
				}
				
			}
			.cancel{
					background: #162842;
    				border: 1px solid #162842;
					text{
						color: #2980fe;
					}
				}
		}
	}
}

</style>
